<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>保存</button>
  <button>读取</button>
  <button>删除</button>
  <button>清除</button>
  <script>
    /* 
     localStorage与sessionStorage
     两个的语法完全一致
     区别:
     localStorage将数据存在了本地  (刷新和关闭浏览器不会改变)
     sessionStorage 刷新和关闭浏览器会改变

    
    */

    const buttons = document.querySelectorAll('button')
    const user = { username: 'tom', pwd: '123123' }
    buttons[0].onclick = () => {
      // sessionStorage.setItem('user_key2', JSON.stringify(user))
      localStorage.setItem('user_key', JSON.stringify(user))
    }
    buttons[1].onclick = () => {
      // const user2 = JSON.parse(sessionStorage.getItem('user_key'))
      const user2 = JSON.parse(localStorage.getItem('user_key2'))
      console.log(user2)
    }
    buttons[2].onclick = () => {
      // sessionStorage.removeItem('user_key')
      localStorage.removeItem('user_key2')
    }
    buttons[3].onclick = () => {
      // sessionStorage.clear()
      localStorage.clear()
    }
  </script>
</body>

</html>